// import Container from "../../materials/Container";
import { useComponentConfigStore } from "../../store/component-config";
import { useMemo } from "react";
import Materialitem from "../Materialitem";


function Materpail() {

    //引入仓库
    const { componentConfig } = useComponentConfigStore();
    // 只有当[componentConfig]发生变更时，才会重新计算，优化性能
    // 这里的componentConfig是一个对象，每次变更都会重新计算，所以需要使用useMemo来优化性能
    const components = useMemo(() => {
        // 取对象的值，转化为数组，返回数组
        return Object.values(componentConfig)
    }, [componentConfig])

    return (
        <div>
            {
                components.map((item, index) => {
                    return <Materialitem key={item.name + index} name={item.name} />
                })
            }
        </div>
    )
}
export default Materpail;